<template>
    <div class="search">

        <div class="search-obj">
            <div class="title"> 选择模型:</div> <el-select v-model="model" placeholder="选择模型" style="width: 300px"
                clearable>
                <el-option v-for="item in modelList" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
        </div>
        <div class="submit">
            <el-button color="rgba(200, 16, 46, 100)">导入数据源样本</el-button>
            <el-button color="rgba(200, 16, 46, 100)">模型试算</el-button>
        </div>
    </div>
    <div class="antecedent-model-body">
        <div class="body-one">
            <div class="body-one-left">
                <el-descriptions title="样本信息" direction="horizontal" :column="1" size="large" border>
                    <el-descriptions-item label="模型名称">判别模型一</el-descriptions-item>
                    <el-descriptions-item label="类型">消费贷</el-descriptions-item>
                    <el-descriptions-item label="量级">53721条</el-descriptions-item>
                    <el-descriptions-item label="正负样本比例">9.1（逾期：8:2）</el-descriptions-item>
                    <el-descriptions-item label="样本时间">2022年9月~2013年12月</el-descriptions-item>
                    <el-descriptions-item label="逾期定义">超过约定还款日三天</el-descriptions-item>
                    <el-descriptions-item label="不良定义">M2+</el-descriptions-item>
                </el-descriptions>
            </div>
            <div class="body-one-right">
                <el-descriptions title="训练模型算法" direction="horizontal" :column="1" size="large" border>
                    <el-descriptions-item label="算法名称">随机森林</el-descriptions-item>
                    <el-descriptions-item label="决策树数量">100</el-descriptions-item>
                    <el-descriptions-item label="最大树深">6</el-descriptions-item>
                    <el-descriptions-item label="节点分裂最大特征数">15</el-descriptions-item>
                    <el-descriptions-item label="最小样本分裂数">50</el-descriptions-item>
                    <el-descriptions-item label="最小叶子节点样本数">50</el-descriptions-item>
                    <el-descriptions-item label="样本权重">自动</el-descriptions-item>
                    <el-descriptions-item label="是否使用Bootstrap抽样">是</el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <div class="body-two">
            <div style="margin-left: 2rem; font-size: 1rem; font-weight: bold;">样本示例</div>
            <el-image style="width: 100% ;height: 120%" :src="imageName" :fit="fit" />
        </div>
        <div class="body-three">
            <div style="margin-left: 2rem; margin-top: 1rem; font-size: 1rem; font-weight: bold;">模型效果</div>
            <el-image style="width: 48rem ;height: 50rem;margin-left: 2rem;" :src="imageName2" :fit="fit" />
            <el-image style="width: 48rem ;height: 50rem;margin-left: 2rem;" :src="imageName1" :fit="fit" />
        </div>
    </div>

</template>
<script setup>
import imageName from "../assets/1730166073289.jpg"
import imageName1 from "../assets/ec70c85a3364f85488668ec97deb20e.png"
import imageName2 from "../assets/20241027191633.png"
import { ref } from 'vue'
let model = ref(1)
const modelList = ref([
    {
        label: "判别模型一",
        value: 1
    }, {
        label: "判别模型二",
        value: 2
    }, {
        label: "判别模型三",
        value: 3
    }, {
        label: "判别模型四",
        value: 4
    },
])

</script>
<style scoped lang="scss">
.search {
    display: flex;
    flex-direction: row;
    margin-top: 80px;
    margin-left: 80px;

    .search-obj {
        display: flex;
        flex-direction: row;

        .title {
            align-self: center;
            margin-right: 20px;
        }
    }

    .submit {
        margin-left: 40px;
    }
}

.antecedent-model-body {
    width: 100%;
    margin-bottom: 10rem;

    .body-one {
        width: 100%;
        display: flex;
        flex-direction: row;

        .body-one-left {
            width: 45%;
            margin-left: 2rem;
            margin-top: 2rem;
        }

        .body-one-right {
            width: 45%;
            margin-left: 4rem;
            margin-top: 2rem;
        }
    }
}
</style>